<template>
  <div>
    <v-dialog title="查看新建应付" :show.sync="dialogVisible" :destroy-on-close="true" @beforeClose="beforeClose" width="1200px">
      <div class="card-box">
        <div class="data-title" style="margin-left: 20px">基本信息</div>
        <el-form class="card-box">
          <div class="info-list mb20" style="font-size: 16px">
            <dl>
              <dt>关联合同</dt>
              <dd>{{form.propertyNames}}</dd>
            </dl>
            <dl>
              <dt>付款项目</dt>
              <dd>{{form.chargeProjectName}}</dd>
            </dl>
            <dl>
              <dt>出租方</dt>
              <dd>{{form.customerName}}</dd>
            </dl>
            <dl>
              <dt>合同应付金额(元)</dt>
              <dd>{{form.payableMoneyOld}}</dd>
            </dl>
            <dl>
              <dt>本次调整金额(元)</dt>
              <dd>{{form.adjustmentAmount}}</dd>
            </dl>
            <dl>
              <dt>调整后金额(元)</dt>
              <dd>{{form.payableMoney}}</dd>
            </dl>
            <dl>
              <dt>费用周期</dt>
              <dd>{{form.costPeriodStart}}至{{form.costPeriodEnd}}</dd>
            </dl>
            <dl>
              <dt>应付日期</dt>
              <dd>{{form.payableDate}}</dd>
            </dl>
            <dl class="full">
              <dt>备注</dt>
              <dd>{{form.remarks}}</dd>
            </dl>
          </div>
        </el-form>
      </div>
      <div class="card-box">
        <div class="data-title" style="margin-left: 20px">查看附件</div>
        <div style="padding: 20px 20px">
          <upload-media
            type="file"
            ref="myUpload"
            :url="fileUploadUrl"
            :busId="projectId"
            :modelType="modelType"
            :propsFileList="uploadFileList"
            :isView="true"
          ></upload-media>
        </div>
      </div>
      <div class="card-box">
        <div class="data-title" style="margin-left: 20px">办理意见</div>
        <div style="padding: 20px 20px">
          <approval-record v-for="(item,index) in recordingLlist" :key="index" v-bind="item"></approval-record>
        </div>
      </div>
      <div class="card-box">
        <el-button type="primary" size="small" @click="go()" class="go-back">关闭</el-button>
      </div>
    </v-dialog>
    <show-receivable ref="showReceivable"></show-receivable>
    <contract-view ref="contractView"></contract-view>
  </div>
</template>

<script>
import { getObj, getApprovalRecord } from '../../api/lessor-payable'
import showReceivable from '../edit/show-receivable'
import contractView from "@/views/rent/contract/view.vue"
import uploadMedia from '@/components/upload-media'
import approvalRecord from '@/components/approval-record'
export default {
  name: "show-actual",
  components: { showReceivable, contractView, uploadMedia, approvalRecord },
  data () {
    return {
      form: {
        chargeProjectName: '',
        propertyNames: '',
        customerName: '',
        payableMoney: '',
        costPeriodStart: '',
        costPeriodEnd: '',
        payableDate: '',
        remarks: '',
        opinion: '',
        adjustedAmount: '',
        adjustmentAmount: ''
      },
      dialogVisible: false,
      fileUploadUrl: '/admin/sys-file/upLodeFileEdit',
      uploadFileList: [],
      modelType: 'finance',
      projectId: '',
      recordingLlist: []
    }
  },
  methods: {
    show (item) {
      this.dialogVisible = true
      if (item) {
        // console.log(item)
        this.projectId = item.payableId
        this.form = item
        this.approvalRecord(item.payableId)
      }
    },
    go () {
      this.dialogVisible = false
			this.$emit('handleClose')
    },
    beforeClose (done) {
      this.$emit('beforeClose')
    },
    async approvalRecord (id) {
      const res = await getApprovalRecord(id)
      if (res.data.code == 0) {
        this.recordingLlist = res.data.data
      }
    }
  }
}
</script>

<style lang='scss' scoped>
@include data-title();

@include info-list(4);
@include formWrap(4);
.card-box {
    position: relative;
    min-height: 55px;
    .go-back {
        position: absolute;
        top: 10px;
        right: 15px;
    }
}
</style>
